Interactive Design : Project 1 / Prototype Design
22.4.2024 / Week1
Angel Tan Xin Kei / 0356117
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 1 / Prototype Design
⋆ ˚｡⋆୨୧˚ Index ˚୨୧⋆｡˚ ⋆
⋆ ˚｡⋆୨୧˚ Instruction ˚୨୧⋆ ˚｡⋆
Objective: In this first part of the assignment, you will focus on
creating a UI design prototype for your digital resume or curriculum vitae
(CV) using prototyping software such as Adobe XD or Figma. The UI design
prototype will showcase the layout, visual elements, and user interface
interactions of your digital resume.
Requirements:
- Content and Structure:
- Prepare the content for your resume, including personal details, education, work experience, skills, projects, and other relevant sections.
- Decide on the order and hierarchy of sections based on their importance and relevance.
- Layout and Visual Design:
- Design the layout of your digital resume using the chosen prototyping software. Define the placement of different sections and how they will flow together.
- Apply a consistent visual design using typography, color palette, and appropriate spacing.
- Sections and Organization:
- Organize your resume into logical sections, such as "Profile," "Education," "Experience," "Skills," "Projects," and "Contact."
- Prioritize sections based on their relevance and significance to the position you're targeting
- Visual Elements:
- Incorporate relevant images, icons, or placeholders that align with the content and enhance the visual appeal of your digital resume.
- Prototype Presentation:
- Update your e-portfolio explaining and showcasing the processes of the task
- Evaluation Criteria:
- Clarity and effectiveness of the UI design, layout, and visual elements. Appropriateness of the chosen typography, color palette, and imagery.
⋆ ˚｡⋆୨୧˚ Practical ˚୨୧⋆ ˚｡⋆
I began my journey by seeking inspiration and gathering ideas particularly
fromPinterest. I focused my searches on "online digital resumes" to
explore the latest trends and designs. Additionally, I examined numerous
portfolio landing pages to understand how professionals present their work
and skills in an engaging manner.
Mr Shamsul mentioned that it is essential on how people might look at us
as a professional designer.Thus, I gained some insight of how people
illustrate ( promote ) themselves in e-portfolio in a creative way.
This initial research phase provided me with a wealth of creative concepts
and visual examples to consider for my own project.
Research & Inspirations
Ideation & Sketch
Next, I proceeded to sketch out four distinct layouts, each featuring a
unique design. This step involved experimenting with various structures
and visual elements to determine the most effective way to present the
information. Each layout was carefully crafted to explore different styles
and approaches, allowing me to visualize how the final product might look
and function. This iterative process helped refine my ideas and set the
foundation for the next phase of development.
|
| Layout #1 |
|
| Layout #2 |
|
| Layout #3 |
Digitisation Process
Typography:
- Heading: Acme
- Sub-Heading: Abril Fatface
- Body Text: Anek Malayalam
Colour Palettes:
I decided to use my favorite color scheme, which includes shades of pink
and purple, to create my palettes. I believe these colors are an effective
way to express my personal style and preferences. By incorporating pink
and purple, I aimed to infuse my designs with a sense of individuality and
authenticity. This choice not only made the creative process more
enjoyable but also ensured that the final product would truly reflect my
unique taste and personality.
By adding headers, I can organize the information in a logical and
accessible manner, making it easier for readers to follow along and
understand the main points. This approach not only improves the
readability of the content but also enhances the overall user experience
by breaking down the information into manageable and clearly defined
segments.
Final Outcome:
Figma Prototype Link: https://www.figma.com/proto/dyBii65ZUCRh4wqGFS3rYl/Untitled?node-id=1-2&t=Zbh45dzGymEIw2qK-1
My Digital Resume in PDF:
⋆ ˚｡⋆୨୧˚ Reflection ˚୨୧⋆ ˚｡⋆
Experience
One of the most valuable experience from this project was how I actually
started with some drafts then with a well-structured content plan made
the design process smoother. Additionally, working with prototyping
software like Figma improved my design skills and gave me a better
understanding of creating interactive and visually appealing interfaces.
Observation
Overall, this project was a significant learning experience. It enhanced
my ability to create structured and visually appealing digital resumes
using prototyping software. The skills and insights gained from this
project will be invaluable in future design tasks and professional
applications.
Findings
I have learned that is is very essential to balance between text and
visual elements was crucial in creating an aesthetically pleasing yet
informative resume at the meantime to show out your characteristic and
impression.
⋆ ˚｡⋆୨୧˚ Quick Links ˚୨୧⋆ ˚｡⋆
Comments
Post a Comment